<script setup>
import { reactive, ref } from '@vue/reactivity'
import { computed, onBeforeUnmount, onMounted } from 'vue'
import { useStore } from 'vuex'
const store = useStore() //vuex
store.commit('getInfect') //提交获得common和api的方法
const isAndroid = store.state.isAndroid //安卓
const isiOS = store.state.isiOS //ios
const common = store.state.common.obj //common.js
const api = store.state.api
const isAnchor = common.userId >= 300000 && common.userId < 500000 ? true : false
// 定位
let cur = ref(0)
const getCur = async () => {
    await api.gameStage().then(res => {
        // res = {
        //     data: {
        //         "errcode": 0,
        //         "result": 4,
        //         "errmsg": "",
        //         "status": 200
        //     }
        // }
        if (res.data.status == 200) {
            cur.value = res.data.result
            getData()
        }
    })
}
// 赛段接口
const getData = () => {
    switch (cur.value) {
        case 0:
            break;
        case 1:
            getLeg2()
            break;
        case 2:
            // getLeg3()
            getLeg3Date()

            break;
        case 3:
            getLeg4()
            break;
    }
}
// 面板数据
let panelData = reactive({
    result: {}
})
// 2.淘汰赛
const getLeg2 = async () => {
    await api.leg2GiftPanel({ anchorId: isAnchor ? common.userId : common.anchorId }).then(res => {
        // res = {
        //     data: {
        //         "errcode": 0,
        //         "result": {
        //             "limitProgress": 999,
        //             "progress": 0,
        //             "state": 0
        //         },
        //         "errmsg": "",
        //         "status": 200
        //     }
        // }
        if (res.data.result) panelData.result = res.data.result
    })
}


// 3.晋级赛
const getLeg3Date = async () => {
    await api.leg3Calendar({ anchorId: isAnchor ? common.userId : common.anchorId }).then(res => {
        if (res.data.result){
            panelData.result = res.data.result
           
             res.data.result.forEach(item => {
                    if (item.flag == 1){
                        if(item.calendarId<4){
                            getLeg3()
                        }else{
                            getLeg3p2(item.calendarId)
                        }
                    }
                });
        }
    })
}
// 3.晋级赛
const getLeg3 = async () => {
    await api.leg3GiftPanel({ anchorId: isAnchor ? common.userId : common.anchorId }).then(res => {
        // res = {
        //     data: {
        //         "errcode": 0,
        //         "result": {
        //             "limitProgress": 999,
        //             "progress": 0,
        //             "state": 0
        //         },
        //         "errmsg": "",
        //         "status": 200
        //     }
        // }
        if (res.data.result) panelData.result = res.data.result
    })
}

// 3.晋级赛
const getLeg3p2 = async (calendarId) => {
    await api.leg3p2Award({ anchorId: isAnchor ? common.userId : common.anchorId,day: calendarId-4}).then(res => {
        // res = {
        //     data: {
        //         "errcode": 0,
        //         "result": {
        //             "limitProgress": 999,
        //             "progress": 0,
        //             "state": 0
        //         },
        //         "errmsg": "",
        //         "status": 200
        //     }
        // }
        if (res.data.result) panelData.result = res.data.result
    })
}

// 4.决赛
const getLeg4 = async () => {
    await api.leg5Award({ anchorId: isAnchor ? common.userId : common.anchorId }).then(res => {
        // res = {
        //     data: {
        //         "errcode": 0,
        //         "result": {
        //             "anchorPic": "http://qiqi-resource.qxiu.com/op/2019/09/05/63292ac79dd04e88b38ba0693b1d6a10.jpg",
        //             "anchorId": 445441,
        //             "anchorName": "春暖花开",
        //             "rankNo": 1,
        //             "roomId": 1445441,
        //             "scores": 8,
        //             "showtype": 1,
        //             "state": 2,
        //             "timeStampe": 1657250812210,
        //             "goodsName": "热气球",
        //             "goodsCount": 1
        //         },
        //         "errmsg": "",
        //         "status": 200
        //     }
        // }
        if (res.data.result) panelData.result = res.data.result
    })
}

const panel = computed(() => {
    return panelData.result
})
let time
onMounted(() => {
    getCur()
    time = setInterval(async () => {
        getData()
    }, 8 * 1000);
})
onBeforeUnmount(() => {
    clearInterval(time)
})
// 判断版本号添加类名的方法
function toNum (d) {
    let a = d.toString();
    let c = d.split(".");
    let num_place = ["", "0", "00", "000", "0000"],
        r = num_place.reverse();
    for (let i = 0; i < c.length; i++) {
        let len = c[i].length;
        c[i] = r[len] + c[i];
    }
    let res = c.join("");
    return res;
}
const compareVersion = (a, b) => {
    let alen = a.split(".").length;
    let blen = b.split(".").length;
    if (alen < blen) {
        for (let i = 0; i < blen - alen; i++) {
            a += ".0";
        }
    } else if (blen < alen) {
        for (let i = 0; i < alen - blen; i++) {
            b += ".0";
        }
    }
    let _a = toNum(a),
        _b = toNum(b);
    return _a - _b;
};
const setRem = () => {
    function setRem () {
        var designWidth = 150,
            rem2px = 100;
        document.documentElement.style.fontSize =
            (document.documentElement.clientWidth / designWidth) * rem2px + "px";
    }
    window.onresize = setRem;
    setRem();
}
// 判断版本号添加类名
let sizeClass = ''
if (isAndroid) {
    setRem()
    if (compareVersion(common.version, "4.1.5.0") < 0) {
        sizeClass = "mss";
    } else {
        sizeClass = "mnew";
    }
} else if (isiOS) {
    setRem()
    if (compareVersion(common.version, "4.7.5.0") < 0) {
        sizeClass = "mss";
    } else {
        sizeClass = "mnew";
    }
} else {
    if (compareVersion(common.version, "2.77.0.0") < 0) {
        sizeClass = "pc";
    } else {
        sizeClass = "pcnew";
    }
}
//跳转活动页
const jumpPage = () => {
    const showurl =
        "https://page.qxiu.com/activity/2024/march/index-m.html" +
        window.location.search;
    if (isiOS) {
        window.location.href =
            "#guagua://qiqi::9::2:" + encodeURIComponent(showurl);
    } else if (isAndroid) {
        window.location.href =
            "guagua://qiqi::9::2:" + encodeURIComponent(showurl);
    } else {
        window.open(
            "http://page.qxiu.com/activity/2024/march/index.html" +
            window.location.search +
            "&width=1029&height=668&title=春季联赛2024&openWay=0&fromeHall=0"
        );
    }
}
</script>

<template>
    <div class="wrap" @click="jumpPage" v-cloak :class="sizeClass">
        <div class="leg1 leg2" v-if="cur == 1">
            <ul class="leg2Info gift">
                <li>
                    <p>已收到联赛票</p>
                    <p>{{ panel.totalTicket }}</p>
                </li>
                <li>
                    <p>已获奖励
                    </p>
                    <p>{{ panel.goodsName + '*' + panel.haveGotGiftNum }}</p>
                </li>
                <li>
                    每收到{{ panel.limitTicket }}个联赛票奖励{{ panel.goodsName }}*1
                </li>
            </ul>
        </div>
        <div class="leg1 leg2" v-if="cur == 2">
            <ul class="leg2Info gift">
                <li>
                    <p>有效胜场</p>
                    <p>{{ panel.todayPkWins||panel.scores||0 }}</p>
                </li>
                <li>
                    <p>已获奖励
                    </p>
                    <p>{{ panel.goodsName }}*{{ panel.haveGotGiftNum||panel.goodsCount||0 }}</p>
                </li>
                <li>
                    每累计{{ panel.limitPkWins||panel.sendLimit }}个有效胜场奖励{{ panel.goodsName }}*1
                </li>
            </ul>
        </div>
        <div class="leg1 leg2" v-if="cur == 4">
            <ul class="leg2Info gift">
                <li>
                    <p>已收到联赛票</p>
                    <p>{{ panel.scores }}</p>
                </li>
                <li>
                    <p>已获奖励
                    </p>
                    <p>{{ panel.goodsName + '*' + panel.goodsCount }}</p>
                </li>
                <li>
                    每收到XXXX个联赛票奖励{{ panel.goodsName }}*1
                </li>
            </ul>
        </div>
    </div>
</template>

<style lang='scss' scoped></style>